<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }   

        html{
            width: 3000px;
            height: 5000px;
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            overflow: hidden;
            margin: 50px;
            /* margin-left: 1000px;
            margin-top: 1000px; */
        }

        .sub {
            width: 100px;
            height: 100px;
            background-color: orange;
            margin: 50px;
            /* 点透属性  => 添加了此属性的元素,不会作为鼠标事件的事件源, 点击该元素,会透过该元素点击其父元素 */
            pointer-events: none;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="sub"></div>
    </div>
</body>
<script>
    // 事件对象  => 事件触发时相关的信息

    // 浏览器侦听到事件触发后,执行对应的事件处理函数  => 并传入事件对象,存储事件触发时相关的信息(什么时间 发生了什么类型的事件 发生在谁身上 鼠标按下的按键  鼠标的位置 键盘按下的按键)

    // 事件对象的兼容
    //  e = e || window.event; 

    // 事件对象的相关属性
    // timeStamp   从页面加载到事件触发时经过的时间(单位:ms) (了解)
    // type        事件类型 (click dblclick mousedown keydown)

    // target      事件源(触发事件的元素 => 给父元素绑定事件,除元素本身可以触发外, 子(代)元素也可以触发 => 通过此属性可以知道哪个元素触发的事件)
    // 绑定事件的元素  => 元素本身
    // 触发事件的元素  => 元素本身  子元素 子代元素

    // path        从事件源开始,事件源以及父代元素的数组 (2023年已经废弃)
    // e.composedPath()   方法 => 替换e.path的方法 => 事件源以及父代元素的集合

    // ctrlKey  事件触发时,ctrl键是否被按下
    // altKey  事件触发时,alt键是否被按下
    // shiftKey  事件触发时,shift键是否被按下
    // metaKey  事件触发时,meta键(win键)是否被按下

    // 常用于做组合键  ctrl + c   ctrl + v   ctrl + enter 

    // 鼠标事件相关 (鼠标按键 鼠标位置)
    // button  事件触发时按下的鼠标按键  (左:0 中:1 右:2 侧键:3 4)
    // buttons  (IE低版本 - 了解)  事件触发时按下的鼠标按键   (左:1 右:2  左右:3  中:4   左中:5  右中:6   左中右:7  侧键: 8 16 )

    // e.clientX  e.clientY  事件触发时, 鼠标相对于浏览器可视窗口左上角的位置
    // e.pageX  e.pageY      事件触发时, 鼠标相对于文档左上角的位置
    // e.offsetX  e.offsetY  事件触发时, 鼠标相对于事件源左上角的偏移


    // 问题:
    // 点击sub,返回鼠标相对于box左上角的偏移
    
    // 解决方法:
    // (1)  自己算  => 麻烦
    // var posX = e.pageX - box.offsetLeft;
    // var posY = e.pageY - box.offsetTop;
    // console.log(posX,posY);

    // (2) 给元素添加pointer-events:none; 点透属性
    // 可以直接获取鼠标相对于box左上角的偏移   => 缺点: 以后sub无法绑定任何鼠标事件


    var box = document.querySelector(".box");


    // onclick  鼠标单击事件(鼠标左键 按下并松开) 
    box.onmousedown = function (e) { // event  evt  e => 形参,接收事件对象 (常规浏览器/高版本IE)
        e = e || window.event;
        // console.log(this); // this => 绑定事件的元素(元素本身)

        console.log("box被点击", e);
        
        // console.log(e.target, e.offsetX , e.offsetY);

        // (1)  自己算  => 麻烦
        // var posX = e.pageX - box.offsetLeft;
        // var posY = e.pageY - box.offsetTop;
        // console.log(posX,posY);

        // (2) 给元素添加pointer-events:none; 点透属性
        console.log(e.target, e.offsetX , e.offsetY);


      
    }


</script>

</html>